@import models.Tables.QtlRow
@(qtl: QtlRow)
@config.main(qtl.qtlId) {

    <style>

            .active {
                background-color: #036 !important;
            }

    </style>

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("QTL ID : " + qtl.qtlId +  "(Chr" + qtl.chr + ":" +qtl.left + "-" +qtl.right +")", "CsQTL", "/capdb/tools/qtlPage")

            <div class="main-body">

                <table class="table table-hover table-bordered">
                    <tbody>
                        <tr><th style="width: 30%">Trait </th><td>@{
                            qtl.`trait`
                        }</td></tr>
                        <tr><th>QTL region</th><td>Chr@qtl.chr:@qtl.left-@qtl.right</td></tr>
                        <tr><th>Length</th><td>@qtl.length</td></tr>
                        <tr><th>m5C methylated mRNA</th><td>@qtl.m5c</td></tr>
                        <tr><th>m6A methylated mRNA</th><td>@qtl.m6a</td></tr>
                    </tbody>
                </table>

                <hr/>
                <div>
                    @epigTypeButton("CsVm5C")
                    @epigTypeButton("CsGm5C")
                    @epigTypeButton("CsVm6A")
                    @epigTypeButton("CsGm6A")
                </div>

                <div style="margin-top: 20px">
                    @repetButton("Repet1")
                    @repetButton("Repet2")
                    @repetButton("Repet3")
                </div>


                <table class="table table-hover table-bordered" id="table" style="margin-top: 20px"
                 data-pagination="true" data-advanced-sortable="true"
                 data-page-list="[10]">
                    <thead>
                        <tr>
                            <th data-field="site" data-sortable="true" data-search-type="text" >Methylation site</th>
                            <th data-field="chrom"  data-sortable="true" data-search-type="text" >Chr</th>
                            <th data-field="start"  data-sortable="true" data-search-type="num" >Start position</th>
                            <th data-field="end"  data-sortable="true" data-search-type="num" >End position</th>
                            <th data-field="geneid"  data-sortable="true" data-search-type="text"  data-formatter="GetGeneId" >Gene ID</th>
                        </tr>
                    </thead>
                </table>

            </div>
        </div>
    </div>

    <script>

            $(function () {
                $("#table").bootstrapTable();
                $("input[name=epigType][value=CsVm5C]").addClass("active");
                $("input[name=repet][value=Repet1]").addClass("active");
                getData();
            })

            function changeChoose(obj) {
                let clickName = $(obj).attr("name");
                let clickValue = $(obj).val();
                $("input[name=" + clickName + "]").removeClass("active");
                $("input[name=" + clickName + "][value=" + clickValue + "]").addClass("active")
                getData()
            }

            function getData() {
                const active = $(".active");
                let enigType;
                let repet;
                $.each(active, (i, x) => {
                    const name = $(x).attr("name");
                    console.log(name)
                    if (name === "epigType") {
                        enigType = $(x).val()
                    } else if(name === "repet") {
                        repet = $(x).val()
                    }
                })

                $.ajax({
                    url: "@routes.ToolsController.getEpigInfosByRange()",
                    type: "post",
                    data: {
                        "epigType": enigType,
                        "repet": repet,
                        "chr": "@qtl.chr",
                        "start": "@qtl.left",
                        "end": "@qtl.right"
                    },
                    success: (data) => {
                        $("#table").bootstrapTable("load", data);
                    }
                })
            }


            function GetGeneId(value, row) {
                return `<a href="/capdb/browse/geneInfoPageByGeneId?geneId=${row.geneid}" target="_blank">${value}</a>`
            }



    </script>
}

@epigTypeButton(value: String) = {
    <input type="button" class="btn my-btn" name="epigType" value="@value" onclick="changeChoose(this)"/>
}

@repetButton(value: String) = {
    <input type="button" class="btn my-btn" name="repet" value="@value" onclick="changeChoose(this)"/>
}